<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原始Vue使用方法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.5.22/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <div>
            {{1+1}}  
        </div>
        <div>
            <p>属性数据：v-bind</p> 
            <p v-bind:title="msg">鼠标悬浮提示</p>
            <p :title="msg1">鼠标悬浮提示1</p>
        </div>
        <br>
        <div>
            <p>按钮数据：v-on</p> 
            <button v-on:click="met">点击打印方法</button>
            <button @click="met1">点击打印方法1</button>
        </div>
    </div>
    

    <script>
        // Vue(react)前端开发框架 Vue作者:尤雨溪 版本:Vue3（2020年）vue2  
        // 特点:操作DOM更高效（自动更新页面--响应式）  

        // 1. 通过 Vue.createApp() 创建 Vue 实例
        // Vue.createApp() 是 Vue 3 中创建 Vue 实例的推荐方式（Vue 2 中为 new Vue()）
        const app = Vue.createApp({
            // data() 是 Vue 实例的配置项，用于定义组件的状态数据
            // 插值表达式：页面上使用数据用“ {{ }} ”表示
            data() {
                return {
                    message: "你好 Vue",
                    msg:"这是完整的",
                    msg1:"这是不完整的"
                }
            },
            methods: {
                met() {
                    console.log("打印");
                },
                met1() {
                    console.log("打印1");
                }
            },
        })
        //挂载： app.mount('#app') 将 Vue 实例挂载到 id 为 "app" 的 DOM 元素上
        app.mount('#app')
    </script>
</body>
</html>